export default {
    data: {
        title: "",
        option: {
            chartZone: [], //图表左上角与右下角坐标数组
            yAxisLable: [1,2,3,4,5,6,7], //Y轴内容
            yMax: 0, //Y轴最大值
            guideLine: true, //是否存在辅助线
            dataPoint: true, //是否存在数据点
            xAxisLable: [1,2,3,4,5,6,7], //x轴内容
            data: [1,2,3,4,5,6,7], //数据内容
            lineStyle: {
                line_width: 0, //数据条的宽
                color: '#1abc9c', //折线的颜色
                radius: 0 //数据点半径
            },
            axisArrow: {
                size: 2, //箭头因子大小
                color: 'red' //箭头填充色
            },
            dataStyle: {
                radius: 5,
                color: "#ee6587"
            }
        }
    },
    props:{
        canvasX:{
            type: Number,
            default(){
                return 2560;
            }
        },
        canvasY:{
            type: Number,
            default(){
                return 1600;
            }
        },
        option:{
            type: Object,
        },
    },
    onInit(){
        this.draw();
    },

    draw() {
        this.drawAxis()
        this.drawYLables()
        this.drawXLables()
        this.drawData()
        this.drawArrow()
        this.drawArrowY()
    },
    //绘制X，Y坐标轴
    drawAxis() {
        let chartZone = this.option.chartZone
        const el = this.$element('the-canvas');
        const context = el.getContext('2d');
        context.save()
        context.lineWidth = 2
        context.strokeStyle = '#353535'
        context.beginPath()
        context.moveTo(chartZone[0], chartZone[1])
        context.lineTo(chartZone[0], chartZone[3])
        context.lineTo(chartZone[2], chartZone[3])
        context.stroke()
    },
    //绘制y轴坐标
    drawYLables() {
        const el = this.$element('the-canvas');
        const context = el.getContext('2d');
        context.save()
        let labels = this.option.yAxisLable;
        let yLength = (this.option.chartZone[3] - this.option.chartZone[1]) * 0.98
        let gap = yLength / (labels.length - 1)
        let option = this.option
        labels.forEach(function (label, index) {
            //绘制坐标文字
            //offset为y轴上数据与y轴的距离
            let offset = context.measureText(label).width + 20
            context.strokeStyle = '#eaeaea';
            context.font = "16px"
            context.fillText(label, option.chartZone[0] - offset, option.chartZone[3] - index * gap);
            //绘制小间隔
            context.strokeStyle = '#353535';
            context.beginPath();
            context.moveTo(option.chartZone[0] - 10, option.chartZone[3] - index * gap);
            context.lineTo(option.chartZone[0], option.chartZone[3] - index * gap)
            context.stroke()
        })
    },
    //绘制x轴坐标
    drawXLables() {
        const el = this.$element('the-canvas');
        const context = el.getContext('2d');
        let labels = this.option.xAxisLable;
        let xLength = (this.option.chartZone[2] - this.option.chartZone[0]) * 0.96
        let gap = xLength / (labels.length)
        let option = this.option
        labels.forEach(function (label, index) {
            //绘制坐标文字
            let offset = context.measureText(label).width
            context.save()
            context.strokeStyle = '#eaeaea';
            context.font = "18px"
            context.fillText(label, option.chartZone[0] + (index + 1) * gap - offset / 2, option.chartZone[3] + 30);
            //绘制小间隔
            context.beginPath();
            context.strokeStyle = '#353535';
            context.moveTo(option.chartZone[0] + (index + 1) * gap, option.chartZone[3]);
            context.lineTo(option.chartZone[0] + (index + 1) * gap, option.chartZone[3] + 10)
            context.stroke()
            //存储偏移量
            option.offsetXLabel = offset / 2
        })
    },

    //绘制数据
    drawData() {
        const el = this.$element('the-canvas');
        const context = el.getContext('2d');
        let data = this.option.data; //数据点坐标
        let xLength = (this.option.chartZone[2] - this.option.chartZone[0]) * 0.96; //线段尾部留白后x轴长
        let gap = xLength / this.option.xAxisLable.length; //x轴间隙
        //缓存从数据值到坐标距离的比例因子
        let yFactor = (this.option.chartZone[3] - this.option.chartZone[1]) * 0.98 / this.option.yMax
        let activeX = 0; //记录绘制过程中当前点的坐标
        let activeY = 0; //记录绘制过程中当前点的y坐标
        context.strokeStyle = this.option.lineStyle.color || '#1abc9c';  //设定折线的颜色
        context.lineWidth = this.option.lineStyle.line_width; //设定折线的线宽

        //绘制折线
        context.beginPath();
        context.moveTo(this.option.chartZone[0], this.option.chartZone[3]); //先将起点移动至0,0坐标
        for (let i = 0; i < data.length; i++) {
            activeX = this.option.chartZone[0] + (i + 1) * gap;
            activeY = this.option.chartZone[3] - data[i] * yFactor;
            context.lineTo(activeX, activeY);
            context.stroke();
        }
        context.restore()


        //绘制数据点辅助虚线
        context.strokeStyle = '#a29d9d'
        context.setLineDash([10, 20])
        context.beginPath()
        if (this.option.guideLine == true) {
            for (let i = 0; i < data.length; i++) {
                context.moveTo(this.option.chartZone[0], this.option.chartZone[3] - data[i] * yFactor)
                activeX = this.option.chartZone[0] + (i + 1) * gap;
                activeY = this.option.chartZone[3] - data[i] * yFactor;
                context.lineTo(activeX, activeY)
                context.lineTo(activeX, this.option.chartZone[3])
                context.lineTo(activeX, this.option.chartZone[3])
                context.stroke()
            }
        }
        //绘制数据
        if (this.option.dataPoint == true) {
            for (let i = 0; i < data.length; i++) {
                activeX = this.option.chartZone[0] + (i + 1) * gap;
                activeY = this.option.chartZone[3] - data[i] * yFactor;
                context.fillStyle = this.option.dataStyle.color
                context.beginPath()
                context.arc(activeX, activeY, this.option.dataStyle.radius, 0, 2 * Math.PI, false)
                context.fill()
                context.closePath()
            }
        }
        context.restore()
    },

    drawArrow() {
        const el = this.$element('the-canvas');
        const context = el.getContext('2d');
        let factor = this.option.axisArrow.size;
        context.save()
        //        context.translate(this.option.chartZone[2], this.option.chartZone[3])
        context.beginPath()
        context.moveTo(this.option.chartZone[2], this.option.chartZone[3])
        context.lineTo(this.option.chartZone[2] + 2 * factor, this.option.chartZone[3] - 3 * factor)
        context.lineTo(this.option.chartZone[2] + 10 * factor, this.option.chartZone[3])
        context.lineTo(this.option.chartZone[2] + 2 * factor, this.option.chartZone[3] + 3 * factor)
        context.lineTo(this.option.chartZone[2], this.option.chartZone[3])
        context.globalAlpha = 0.7
        context.fillStyle = this.option.axisArrow.color
        context.fill()
        context.restore()
    },
    drawArrowY() {
        const el = this.$element('the-canvas');
        const context = el.getContext('2d');
        let factor = this.option.axisArrow.size;
        context.save()
        context.beginPath()
        context.moveTo(this.option.chartZone[0], this.option.chartZone[1])
        context.lineTo(this.option.chartZone[0] - 3 * factor, this.option.chartZone[1] - 2 * factor)
        context.lineTo(this.option.chartZone[0], this.option.chartZone[1] - 10 * factor)
        context.lineTo(this.option.chartZone[0] + 3 * factor, this.option.chartZone[1] - 2 * factor)
        context.lineTo(this.option.chartZone[0], this.option.chartZone[1])
        context.globalAlpha = 0.7
        context.fillStyle = this.option.axisArrow.color
        context.fill()
        context.restore()
    },

}
